<template>
  <el-card class="box-card el-card-flex" body-style="padding-bottom:10px">
    <div slot="header" class="clearfix">
      <span>
        <i class="el-icon-check"></i>
        我的投票
      </span>
      <el-button v-show="submitFlag=='N' && picList.length" plain type="primary" style="float: right;" @click="submitVotes">
        提交
        <i class="el-icon-document-checked el-icon--right"></i>
      </el-button>
    </div>
    <div class="el-flex el-over-auto" style="padding: 20px;">
      <el-row :gutter="20" v-if="picList.length">
        <el-col :span="colspan" v-for="(list, index) in newPicList" :key="'col'+index" :id="'el-col-img-'+index">
          <el-card class="el-card-pic" v-for="(list2, index2) in list" :key="'src'+index2">
            <el-image lazy :src="'/static/img/works/photo_se/'+list2.photoPath" :preview-src-list="['/static/img/works/photo_plus/'+list2.photoPathPlus]"
              @load="photoCommon.photoLoadEvt(newPicList,clonePiclist)"  @error="photoCommon.photoLoadEvt(newPicList,clonePiclist)">
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
              <div slot="placeholder" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div class="el-pic-title">
              <h1 class="el-pic-h1"><span class="size-16">NO.{{list2.photoCode}}</span><br><span class="color-blue">{{list2.count?Number(list2.count):0}}</span>
                <span class="color-gray">票</span></h1>
              <el-button v-show="submitFlag == 'N'" type="info" size="mini" @click="cancelVoteEvt(list2,index,index2)">取消</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <p v-else style="text-align: center;padding-top: 100px;">
        <i class="el-icon-picture-outline color-gray" style="font-size: 50px;"></i>
        <br>您尚未投票哦，赶快点击鼠标选出心仪的作品吧！
      </p>
    </div>
  </el-card>
</template>
<script>
  import './styles/photograph.scss'; //公用样式
  import photoCommon from "./js/photoCommon.js"; //公用方法
  import {
    image,
    MessageBox,
    Message
  } from 'element-ui';
  export default {
    components: {
      'el-image': image, //图片插件
    },
    data() {
      return {
        colspan: 6,
        newPicList: [], //瀑布流数据源
        picList: [], //数据源
        clonePiclist: [],
        submitFlag: "N", //是否提交
        photoCommon: photoCommon
      }
    },
    methods: {
      /* 渲染图片瀑布流*/
      renderPicFull() {
        this.clonePiclist = JSON.parse(JSON.stringify(this.picList));
        this.newPicList = photoCommon.countFullCols(this.picList);; //计算瀑布流列数
        this.colspan = 24 / this.newPicList.length;
        this.newPicList[0].push(this.clonePiclist[0]);
        this.clonePiclist.splice(0, 1)
      },
      /*可投票的摄影作品列表查询*/
      getVotePhotos() {
        let sendDatas = {
          value: {
            topicalId: "最美同事，爱我中煤"
          },
          page: 1,
          size: 10000
        }; //过滤表单无效数据
        this.axios.post('/photo/votePhotos', sendDatas).then(res => {
          if (res.data.code != 10000) return;
          this.picList = res.data.data.records;
          this.submitFlag = res.data.data.submitFlag
          this.renderPicFull(); //渲染图片瀑布流
        });
      },
      /* 点击投票事件*/
      voteEvt(data) {
        this.axios.post('/photo/vote', data).then(res => {
          if (res.data.code != 10000) return;
          data.currentUserVoted = "Y";
          Message.success("投票成功"); //成功提示
        });
      },
      /* 取消投票事件*/
      cancelVoteEvt(data) {
        MessageBox.confirm('您确定要取消投票吗?').then(() => {
          this.axios.post('/photo/cancel', data).then(res => {
            if (res.data.code != 10000) return;
            Message.success("取消投票成功"); //成功提示
            for (let i = this.picList.length; i--; i > 0) {
              if (data.resultId == this.picList[i].resultId) {
                this.picList.splice(i, 1);
              }
            }
            this.clonePiclist = JSON.parse(JSON.stringify(this.picList));
            this.newPicList = photoCommon.countFullCols(this.picList);; //计算瀑布流列数
            this.colspan = 24 / this.newPicList.length;
            let myVar = setInterval(() => {
              if (this.clonePiclist.length > 0) {
                photoCommon.photoLoadEvt(this.newPicList, this.clonePiclist);
              } else {
                clearInterval(myVar);
              }
            }, 10);
          });
        });
      },
      /* 提交事件*/
      submitVotes() {
        let submitInfo = "投票提交后将不能更改，你确定要提交吗";
        if (this.picList.length < 10) {
          submitInfo = "您还可投" + (10 - this.picList.length) + "票，提交后将不能更改，你确定要提交吗";
        }
        MessageBox.confirm(submitInfo).then(() => {
          let resultIds = [];
          this.picList.forEach((v, i) => {
            resultIds.push(v.resultId)
          });
          this.axios.post('/photo/submit', resultIds).then(res => {
            if (res.data.code != 10000) return;
            this.submitFlag = "Y";
            Message.success("提交成功"); //成功提示
          });
        });
      }
    },
    created() {
      window.onresize = () => {
        this.renderPicFull(); //渲染图片瀑布流
      }
      this.getVotePhotos(); //获取作品列表
      photoCommon.imgMaskClose(); //图片放大器,点击遮罩空白处关闭
    }
  }
</script>
